import * as React from 'react';
import BannerAds from "src/components/Ads/Ads";
import { Carousel ,Icon} from 'antd';
import "./Index.scss";

class Index extends React.Component <any,any>{
  constructor(props:any){
    super(props);
    
    this.state = {
      list:[
        {
          avatar:require("src/assets/img/1_wujiandao_1557749222.jpg"),
          cv:0,
          link:"https://www.baidu.com/",
          pv:194,
          state:1, 
          summary:"(图摘自微博，侵删）据艾瑞咨询的报道，2017年中国家电行业，苏宁是最大的市场占有者。线上线下的组合，占据整个行业的20.0%.是京东（12.3%）和",
          time:"1小时前",
          title:"5个 JS 解构有趣的用途",
          userId:"123456",
          userName:"mannymu"
        },
        {
          avatar:require("src/assets/img/1_wujiandao_1557749222.jpg"),
          cv:0,
          link:"https://www.baidu.com/",
          pv:194,
          summary:"(图摘自微博，侵删）据艾瑞咨询的报道，2017年中国家电行业，苏宁是最大的市场占有者。线上线下的组合，占据整个行业的20.0%.是京东（12.3%）和",
          time:"1小时前",
          title:"5个 JS 解构有趣的用途",
          userId:"123456",
          userName:"mannymu"
        },
        {
          avatar:require("src/assets/img/1_wujiandao_1557749222.jpg"),
          cv:0,
          link:"https://www.baidu.com/",
          pv:194,
          summary:"(图摘自微博，侵删）据艾瑞咨询的报道，2017年中国家电行业，苏宁是最大的市场占有者。线上线下的组合，占据整个行业的20.0%.是京东（12.3%）和",
          time:"1小时前",
          title:"5个 JS 解构有趣的用途",
          userId:"123456",
          userName:"mannymu"
        },
        {
          avatar:require("src/assets/img/1_wujiandao_1557749222.jpg"),
          cv:0,
          link:"https://art.51jianmo.com",
          pv:194,
          summary:"(图摘自微博，侵删）据艾瑞咨询的报道，2017年中国家电行业，苏宁是最大的市场占有者。线上线下的组合，占据整个行业的20.0%.是京东（12.3%）和",
          time:"1小时前",
          title:"5个 JS 解构有趣的用途",
          userId:"123456",
          userName:"mannymu"
        }
      ]
    }
  }
  public render() {
    return (
      <div className="_Index">
         <div className="left-sort">
                  <ul>
                    <li className="active">推荐</li>
                    <li>关注</li>
                    <li>程序人生</li>
                    <li>Python</li>
                    <li>Java</li>
                    <li>前端</li>
                    <li>架构</li>
                    <li>数据库</li>
                    <li>运维</li>
                    <li>其他</li>
                  </ul>
              </div>
              <div className="middle-content">
                <div className="ads-banner">
                  <img src={require("src/assets/img/banner-ads.jpg")} alt=""/>
                  <BannerAds/>
                </div>
                <div className="carousel">
                    <Carousel autoplay={true}>
                      <img src={require("src/assets/img/ba3009ec2f9256ef73fd2421c2c40697.jpg")} alt=""/>
                      <img src={require("src/assets/img/3b191a1d20acdbd7d2e52416d58e8fdd.png")} alt=""/>
                      <img src={require("src/assets/img/2e50a6f5e8740c2e87580734e522e64f.jpg")} alt=""/>
                    </Carousel>
                </div>
                <div className="list">
                    <ul className="lists">
                      {
                        this.state.list.map((ele:any,index:number)=>{
                          return (
                            <li key={index}>
                              <h2><a href={ele.link} className="title" target="_blank">{ele.title}</a></h2>
                              <div className="summary online">{ele.summary}</div>
                              <dl className="list_userbar">
                                    <dt>
                                      <img src={ele.avatar} alt=""/>
                                    </dt>
                                    <dd>
                                      <span className="name">{ele.userName}</span><span className="interval" /><span className="time">{ele.time}</span>
                                    </dd>
                                    <div className="interactive">阅读数 <span className="num">{ele.pv}</span>评论 <span>{ele.cv}</span></div>
                              </dl>
                              {ele.state === 1 ? <div className="is_top" /> : <Icon type="close" />}
                            </li>
                          )
                        })
                      }
                     
                    </ul>
                </div>
              </div>
              <div className="right-other">
                <div className="ranks">
                    <div className="person">
                      <h3>本周最受欢迎博主</h3>
                      <ul>
                        <li>
                          <div className="avatar"><img src={require("src/assets/img/1_wujiandao_1557749222.jpg")} alt=""/></div>
                          <div className="content">
                            <a href="" >小小编辑</a>
                            <div className="extra">
                                <span>1850 篇文章</span><span>136.7k 次访问</span>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>

                    <div className="compose">
                      <h3>热门文章</h3>
                      <ul>
                        <li>
                          <div className="avatar"><img src={require("src/assets/img/1_wujiandao_1557749222.jpg")} alt=""/></div>
                          <div className="content">
                            <a href="" >程序员副业赚钱的 8 种模式</a>
                            <div className="extra online">
                             想要致胜云时代，让企业上云更轻松？快来看看这堂精彩的上云课程吧！
                            </div>
                          </div>
                        </li>
                        <li>
                          <div className="avatar"><img src={require("src/assets/img/1_wujiandao_1557749222.jpg")} alt=""/></div>
                          <div className="content">
                            <a href="" >2019 AI ProCon震撼来袭！5折优惠倒计时3天！</a>
                            <div className="extra online">
                             想要致胜云时代，让企业上云更轻松？快来看看这堂精彩的上云课程吧！
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                </div>
              </div>
      </div>
    );
  }
}

export default Index;
